<template>
	<view>
		<view class="search-box">
			<u-search placeholder="搜索" bgColor="#ddd" height="25" v-model="searchVal" shape="square" :showAction="false" @change="searchChange"></u-search>
		</view>
		<u-popup :show="visible" :customStyle="popupStyle" mode="top" duration="0" @close="close" @open="open">
			<view class="search-content" v-if="list.length">
				<slot></slot>
			</view>
			<view class="no-search-result" v-else>
				找不到关于“{{searchVal}}"的结果
			</view> 
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: '',
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			popupStyle() {
				let top = '100rpx'
				// #ifdef H5
				top = '190rpx'
				// #endif
				return {
					top: top,
					borderTop: '1rpx solid #eee',
				}
			}
		},
		methods: {
			searchChange() {
				this.$emit('search',this.searchVal)
			},
			open() {
				this.$emit('update:visible',true)
			},
			close() {
				this.$emit('update:visible',false)
			}
		}
	}
</script>

<style>
	.search-box {
		padding: 0 30rpx;
		padding-top: 20rpx;
		background-color: #fff;
		height: 100rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 90rpx;
		/* #endif */
		left: 0;
		width: 100%;
		z-index: 999999;
	}
	
	.search-content {
		height: 600rpx;
		overflow-y: scroll;
	}
	
	.no-search-result {
		height: 600rpx;
		text-align: center;
		line-height: 600rpx;
		font-size: 30rpx;
		background-color: #fff;
	}
</style>
